import {reqDeleteUser, reqGetUsers, reqLogOut} from '../../api'
import { getUser, removeToken, removeUser } from '../../utils/storageUtils'
import render from './index.art'

/**
 * 获取指定页码的用户分页列表显示
 * @param {*} page 页码
 */
async function getUsers(page) {
  // 每页数量是5
  const limit = 5
  // 请求获取分页列表数据
  const result = await reqGetUsers(page, limit)
  // 取出总数量和当前页的用户数组
  const {total, users} = result.data
  // 计算页数
  const pageCount = Math.ceil(total/limit)
  // console.log(total, users, page, pageCount)

  const { username } = getUser()
  // 渲染art模板
  const html = render({total, users, page, pageCount, username})
  // 插入到页面
  document.getElementById('app').innerHTML = html

  // 处理点击退出
  handleClickLogOut()
  // 处理点击删除
  handleClickDelete(users, page, pageCount)
}

// 添加到window => 让模板中能直接调用
window.getUsers = getUsers

/**
 * 给退出按钮绑定点击监听, 退出登陆
*/
function handleClickLogOut() {
  const logoutBtn = document.getElementById('logoutBtn')
  logoutBtn.onclick = async () => {
    // 请求退出登陆接口
    await reqLogOut()
    // 清除保存的token
    removeToken()
    // 清除保存的登陆user
    removeUser()
    // 跳转到登陆页面
    window.location = '/login.html'
  }
}

/* 
处理点击删除按钮
*/
function handleClickDelete(users, page, pageCount) {
  // 得到所有删除按钮
  const btns = document.querySelectorAll('[name=deleteBtn]')
  // 遍历
  btns.forEach(btn => {
    // 给每个都绑定点击
    btn.onclick = async (e) => {
      // 得到当前按钮上绑定的id和username
      const {id, username} = e.target.dataset
      // 显示确定框
      if (window.confirm(`确定要删除${username}吗?`)) {
        // 请求删除
        await reqDeleteUser(id)
        // 重新获取用户分页列表
        if (users.length===1 && page===pageCount) {
          page--
        }
        getUsers(page)
      }
    }
  })
}

// 获取第页显示
getUsers(1)